<template>
    <div>
        <basic-container>
            <el-form ref="searchForm" :model="searchForm" size="mini" :inline="true" >
                <el-form-item label="仓库：" label-width="70px">
                    <el-select v-model="searchForm.warehouseId" placeholder="请选择">
                        <el-option label="全部" value="-1"></el-option>
                        <el-option v-for="(item) in warehouseData" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物品编号：" label-width="100px">
                    <el-input v-model="searchForm.coded" placeholder="请输入物品编号"></el-input>
                </el-form-item>
                <el-form-item label="物品名称：" label-width="100px">
                    <el-input v-model="searchForm.name" placeholder="请输入物品名称"></el-input>
                </el-form-item>
                <el-form-item label="批次号：" label-width="100px">
                    <el-input v-model="searchForm.batch" placeholder="请输入批次号"></el-input>
                </el-form-item>
                <el-form-item label="仅显示库存预警物品：" label-width="170px">
                    <el-checkbox-group v-model="searchForm.stock" @change="searchForm.overdue = false">
                        <el-checkbox label="" name="1"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="仅显示过期预警物品：" label-width="170px">
                    <el-checkbox-group v-model="searchForm.overdue" @change="searchForm.stock = false">
                        <el-checkbox label="" name="1"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" size="small"  plain @click.stop="searchFormSubmit()">搜索</el-button>
                    <el-button size="small"  plain @click.stop="searchFormReset()">重置</el-button>
                </el-form-item>
            </el-form>
            <avue-crud :option="tabOption" :data="tebData" :table-loading="tebLoading" :page="tebDataPage" ref="crud"
                       @size-change='sizeChange' @current-change="currentPage"  @expand-change="expandChange">
                <template slot-scope="scope" slot="supplier">
                    {{ scope.row.supplier.name}}
                </template>
                <template slot-scope="scope" slot="warehouse">
                    {{ scope.row.warehouse.name}}
                </template>
                <template slot-scope="scope" slot="menuLeft">
                    <el-button type="primary" size="small"  plain @click.stop="earlyWarningMenuBtn(null)">预警设置</el-button>
                </template>
                <template slot-scope="scope" slot="menu">
                    <!--<el-button type="primary" size="small"  plain @click.stop="seeMenuBtn(scope.row)">查看</el-button>-->
                    <el-button type="primary" size="small"  plain @click.stop="earlyWarningMenuBtn(scope.row)">修改预警</el-button>
                </template>
            </avue-crud>
        </basic-container>

        <!-- 预警设置 -->
        <el-dialog :visible.sync="earlyWarningMode" width="25%" title="预警设置" class="earlyWarningModeClass">
            <el-form ref="searchForm" :model="setForm" size="mini" inline="true" :rules="addModeFormRules">
                <el-form-item label-width="10px" v-show="earlyWarningModeType == 1">
                    <span class="earlyWarningModeTi"><span class="colorRed">*</span>对所有物品批量设置。</span><br/>
                </el-form-item>
                <el-form-item label="物品编码：" v-show="earlyWarningModeType == 2">
                    {{addMode.coded}}<br/>
                </el-form-item>
                <el-form-item label="物品名称：" v-show="earlyWarningModeType == 2">
                    {{addMode.name}}<br/>
                </el-form-item>
                <el-form-item label="库存预警数量：" prop="warningNumber">
                    <el-input v-model="setForm.warningNumber" :oninput="oninputNum" :min="0" type="number" placeholder="请输入库存预警数量"></el-input>
                </el-form-item>
                <el-form-item label="过期提醒天数：" prop="warningDay">
                    <el-input v-model="setForm.warningDay" :oninput="oninputNum" :min="0" type="number" placeholder="请输入过期提醒天数"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="earlyWarningMode = false">取  消</el-button>
                <el-button size="small" type="primary"  @click="addMOdeSubmit()">确  定</el-button>
            </span>
        </el-dialog>

        <!-- 库存明细 -->
        <el-dialog :visible.sync="detailedMode" width="40%" title="库存明细" center>
            <avue-crud :option="detailedModetabOption" :data="detailedModetebData" :table-loading="detailedModetebLoading" :page="detailedModetebDataPage">
            </avue-crud>

            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="detailedMode = false">关  闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { tabOption,detailedModetabOption } from "@/const-personal/dangerous/consumablesWarehousing/realTime.js"
    import { validatenull } from '@/util/validate'
    import { getListWarehouseAll } from "@/api/public/warehouse.js"
    import { getList, setList , updList ,findById } from "@/api/dangerous/consumablesWarehousing/realTime"

    export default {
        data() {
            return {
                setForm:{},
                addMode:{},
                oninputNum:"if(this.value=='00'){this.value='0';}else{this.value=this.value.replace(/[^0-9]/g,'')}",
                warehouseData: [],
                //表格结构
                tabOption:tabOption,
                detailedModetabOption:detailedModetabOption,
                //表格等待
                tebLoading:false,
                detailedModetebLoading:false,
                //表格分页
                tebDataPage: {
                    total: 0, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 10 , //每页显示多少条
                    pageSizes: [5,10,20] //显示多少条数据
                },
                detailedModetebDataPage: {
                    total: 0, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 10 , //每页显示多少条
                    pageSizes: [5,10,20] //显示多少条数据
                },
                //表格数据
                tebData: [{ name: '测试' }],
                detailedModetebData: [{ name: '测试' }],
                //搜索表单数据
                searchForm: {
                    state : '0', //状态
                    warehouseId: '-1', //仓库
                    number: '',  //审批编号
                    department: '',  //申请部门
                    people:''  //申请人
                },
                addModeFormRules:{
                    warningNumber:[{required: true,message: "请输入库存预警数量",trigger: 'blur'}],
                    warningDay:[{required: true,message: "请输入过期提醒天数",trigger: 'blur'}],
                },
                //预警模态框
                earlyWarningMode: false,
                earlyWarningModeType: 0,
                detailedMode: false,
            }
        },
        created(){
            this.getWarehouseData()
            this.searchFormSubmit()
        },
        methods: {
            expandChange(row, expendList) {
                findById({id:row.id}).then(res=>{
                    if (res.data.code === 200) {
                        row = res.data.data
                    }
                })
            },
            addMOdeSubmit(){
                this.$refs.searchForm.validate((valid)=>{
                    if(valid){
                        if(validatenull(this.setForm.id)){
                            setList(this.setForm).then(res=>{
                                if (res.data.code === 200) {
                                    this.earlyWarningMode = false;
                                    this.$notify({title: '操作成功', type: 'success', message: '设置成功!'});
                                    this.searchFormSubmit()
                                } else {
                                    this.$notify.error({title: '操作失败', type: 'danger', message: res.data.message});
                                }
                            })
                        } else {
                            updList(this.setForm).then(res=>{
                                if (res.data.code === 200) {
                                    this.earlyWarningMode = false;
                                    this.$notify({title: '操作成功', type: 'success', message: '设置成功!'});
                                    this.searchFormSubmit()
                                } else {
                                    this.$notify.error({title: '操作失败', type: 'danger', message: res.data.message});
                                }
                            })
                        }
                    }
                })
            },
            currentPage (val) {
                this.tebDataPage.currentPage = val;
                this.searchFormSubmit();
            },
            sizeChange (val) {
                this.tebDataPage.pageSize = val
                this.searchFormSubmit()
            },
            searchFormSubmit(){
                let data = {
                    warehouseId: this.searchForm.warehouseId == '-1' ? null : this.searchForm.warehouseId,
                    coded: this.searchForm.coded,
                    name: this.searchForm.name,
                    batch: this.searchForm.batch,
                    stock: this.searchForm.stock ? 1 : null,
                    overdue: this.searchForm.overdue ? 1 : null,
                    page: this.tebDataPage.currentPage,
                    size: this.tebDataPage.pageSize,
                }
                getList(data).then(res =>{
                    if(res.data.code==200){
                        this.tebData = res.data.data.list;
                        this.tebData.forEach(item=>{
                            item.coded = item.goodsTypeInfo.coded
                            item.name = item.goodsTypeInfo.name
                            item.specs = item.goodsTypeInfo.specs
                            item.unit = item.goodsTypeInfo.unit
                        })
                        this.tebDataPage.total = res.data.data.total;
                        this.tebDataPage.currentPage = res.data.data.pageNum;
                        this.tebDataPage.pageSize = res.data.data.pageSize;
                    } else {
                        this.$notify.error({ title: '查询失败', message: '获取数据失败！', type: 'danger', });
                    }
                })
            },
            //重置
            searchFormReset(){
                this.searchForm = {
                    state : '0', //状态
                    warehouseId: '-1', //仓库
                    number: '',  //审批编号
                    department: '',  //申请部门
                    people:''  //申请人
                }
            },
            //仓库数据
            getWarehouseData(){
                getListWarehouseAll().then(res =>{
                    if(res.data.code==200){
                        res.data.data.forEach(item=>{
                            this.warehouseData.push({label:item.name,value:item.id})
                        })
                    } else {
                        this.$notify.error({ title: '查询失败', message: '获取仓库数据失败！', type: 'danger', });
                    }
                })
            },
            seeMenuBtn(row){
                this.detailedMode = true;
            },
            earlyWarningMenuBtn(row){
                if(validatenull(row)){
                    this.earlyWarningModeType = 1;
                    this.setForm = { id: null }
                } else {
                    this.earlyWarningModeType = 2;
                    this.addMode = row
                    this.setForm = {
                        id: Number(row.id),
                        warningNumber:Number(row.warningNum),
                        warningDay: Number(row.warningDay)
                    }
                }
                this.earlyWarningMode = true;
            }
        }
    }
</script>

<style>
    input[type="number"]{
        padding-right: 0px!important;
    }
    .colorRed{
        color: red;
    }
    .earlyWarningModeTi{
        color: #bbbbbb;
    }
    .earlyWarningModeClass .el-dialog__body{
        padding: 15px 30px!important;
    }
</style>